const $ = layui.$;
export default class AddStudent{
    constructor(){
        this.render();
        this.handle();
    }
    render(){
        let template = `
            <form class="layui-form" lay-filter="addForm">
            <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input
                type="text"
                name="name"
                required
                lay-verify="required"
                placeholder="请输入姓名"
                autocomplete="off"
                class="layui-input"
                />
            </div>
            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
                <input
                type="text"
                name="age"
                required
                lay-verify="required"
                placeholder="请输入年龄"
                autocomplete="off"
                class="layui-input"
                />
            </div>
            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="gender" value="男" title="男">
                <input type="radio" name="gender" value="女" title="女">
            </div>
            </div>
            <div class="layui-form-item">
            <label class="layui-form-label">选择班级</label>
            <div class="layui-input-block">
                <select name="cls">
                    
                </select>
            </div>
            </div>
            </form>
        `;
        $("#addStudentTemplate").html(template);
    }
    handle(){
        let form = layui.form;
        $("#addBtn").click(function () {
            // 弹出增加学生的窗口
            layer.open({
              type: 1,
              title: "增加学生", //不显示标题栏
              area: "300px;",
              shade: 0.6,
              id: "LAY_layuipro", //设定一个id，防止重复弹出
              btn: ["确认", "取消"],
              btnAlign: "c",
              moveType: 1, //拖拽模式，0或者1
              content: $("#addStudentTemplate").html(),
              yes() {
                console.log("yes", form.val("addForm"));
                $.ajax({
                  type: "post",
                  url: "/students",
                  data: form.val("addForm"),
                  success() {
                    table.reload("studentTable");
                  },
                });
                layer.closeAll();
              },
              success: function (layero) {
                // 打开增加窗口后执行的回调函数
                $.ajax({
                  type:"get",
                  url:"/classes/all",
                  success(data){
                    let str = ``;
                    for(let cls of data){
                      str += `<option value="${cls._id}">${cls.name}</option>`
                    }
                    $("[name=cls]").html(str);
                    form.render();
                  }
                });
                
              },
            });
          });
    }
}